<template>
    <rx-dialog :isOk="false" :isCancel="false">
        <rx-layout>
            <template #middle>
                <div class="insNews-center">
                    <div class="insNews-subject">{{newsCenter.subject }}</div>
                    <div class="insNews-user">
                        <div><rx-icon-show style="margin-right: 5px" icon="icon-lineVue3_user"></rx-icon-show><span>{{newsCenter.authorName}}</span></div>
                        <div><rx-icon-show style="margin-right: 5px" icon="icon-linetime"></rx-icon-show><span>{{newsCenter.createTime}}</span></div>
                        <div><rx-icon-show style="margin-right: 5px" icon="icon-lineicon-test"></rx-icon-show><span>{{newsCenter.readTimes}}</span></div>
                    </div>
                    <div class="insNews-keywords">{{newsCenter.keywords}}</div>
                    <div class="insNews-html" v-html="newsCenter.content"></div>
                    <div class="insNews-attach" v-if="fileList.length>0">
                        <img class="insNews-img" :src="getImage('/image/formCustom/attachment.png')"/>
                        <rx-attach-component v-model="fileList" :readonly="true">
                            <template #fileList="{fileList,previews,openFile,getSize}">
                                <div class="rx-upload-item" :class="[setClass(item)]" v-for="item of fileList">
                                    <div>
                                        <div class="rx-upload-common-le-name">{{item.name}}<span class="rx-upload-common-le-size">({{getSize(item.size)}})</span></div>
                                        <div class="rx-upload-row" v-if="item.fileId">
                                            <div class="rx-upload-user" >
                                                <rx-icon-show icon="icon-linepeople"></rx-icon-show>
                                                <rx-user-info :userId="item.createBy"/>
                                            </div>
                                            <div class="rx-upload-time" >
                                                <rx-icon-show icon="icon-linetime"></rx-icon-show>
                                                {{ item.createTime }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="rx-upload-toolbar">
                                        <cloud-download-outlined
                                            class="down attach-component-icon"
                                            title="下载"
                                            @click="openFile(item)"
                                        />
                                        <eye-outlined
                                            class="previews attach-component-icon"
                                            @click="previews(item)"
                                            title="预览"
                                        />
                                    </div>
                                </div>
                            </template>
                        </rx-attach-component>
                    </div>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
/**
 * 新闻公告详情
 */
import {RxDialog,RxLayout ,RxIconShow} from "@lowcode/jpaas-base-lib";
import InsNewsApi from "@/common/api/portal/insNews";
import {RxAttachComponent} from '@lowcode/jpaas-share-component';
import css_sprites from "@/views/modules/images/css_sprites.png";
export default {
    name: "InsNewsDetail",
    components: {
        RxDialog,
        RxLayout,RxIconShow,
        RxAttachComponent
    },
    props: {
        pkId:{},
        readonly:{
            default:true
        },
        destroy: {}
    },
    data() {
        return {
            img:css_sprites,
            newsCenter:{},
            fileList: [],
            type: {
                media: ['.mp3', 'wav','.mp4', '.avi', '.rmvb','webm','ogg'],
                ppt: ['.ppt', '.pptx'],
                pdf: ['.pdf'],
                excel: ['.xls', '.xlsx'],
                word: ['.doc', '.docx'],
                image: [".jpg", ".jpeg", ".gif", ".png", ".svg", ".bmp"],
                txt: ['.txt'],
                rar: ['.rar'],
                zip: ['.zip']
            },
        }
    },
    created() {
        this.init()
    },
    methods: {
        getSuffix(file) {
            let fileName = file.name;
            if(!fileName){
                return "";
            }
            let indexS = fileName.lastIndexOf(".");
            let _suffix = fileName.substr(indexS).toLowerCase();
            return _suffix;
        },
        setClass(file) {
            if (!file) return;
            let extName = this.getSuffix(file);
            let fileType = this.type;
            for (let key in fileType) {
                if (fileType[key].includes(extName)) {
                    return key + "Box";
                }
            }
            return "otherBox";
        },
        init(){
            this.fileList = [];
            InsNewsApi.readInsNews(this.pkId).then(res=>{
                this.newsCenter = res.data;
                if(res.data.files){
                    this.fileList = JSON.parse(res.data.files);
                }
            })
        },
        getImage(url) {
            return import.meta.env.JPAAS_BASE_URL + url;
        },
    },
    watch: {},
}
</script>

<style scoped>
.insNews-attach{
    border-radius: 4px;
    background: rgba(248, 248, 248, 1);
    padding: 10px;
    margin-top: 20px;
    position: relative;
}
.insNews-img{
    width: 60px;
    position: absolute;
    right: 20px;
    top: -12px;
}
.insNews-center{
    padding: 20px;
}
.insNews-subject{
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 39.2px;
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
}
.insNews-user{
    display: flex;
    grid-gap: 20px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    justify-content: flex-end;
}
.insNews-keywords{
    background-color: #f8f8f8;
    border-radius: 5px;
    width: 100%;
    line-height: 22px;
    letter-spacing: 0px;
    color: #555555;
    font-size: 14px;
    padding: 15px;
    margin-top: 20px;
}
.insNews-html{
    width: 100%;
    margin-top: 30px;
}
.insNews-html img,
.insNews-html  >>> img{
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

.insNews-attach>>>.fileRow{
    border-bottom: none!important;
}






.rx-upload-item{
    display: flex;
    justify-content: space-between;
    padding-left: 35px;
    position: relative;
}
.rx-upload-item:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -15px;
    width: 26px;
    height: 30px;
    background-image: url("../../images/css_sprites.png");
    background-repeat: no-repeat;
    background-position: -102px -60px;
}

.rx-upload-common-le-size {
    line-height: 13px;
    color: #c0c5cc;
    font-size: 12px;
}
.rx-upload-common-le-name {
    line-height: 25px;
    color: #666666;
    font-size: 14px;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;

}
.rx-upload-row{
    font-size: 12px;
    color: #c0c5cc;
    display: flex;
}
.rx-upload-row .rx-upload-user{
    margin-right: 10px;
}

.rx-upload-toolbar{
    display: flex;
    align-items: center;
}

.attach-component-icon {
    margin-right: 10px;
    font-size: 20px;
}

.previews:hover,
.down:hover {
    color: #4D9EFF;
    cursor: pointer;
}

.rx-upload-item.wordBox::before {
    background-position: -56px -10px;
}

.rx-upload-item.txtBox::before {
    background-position: -56px -110px;
}

.rx-upload-item.pdfBox::before {
    background-position: -56px -60px;
}

.rx-upload-item.excelBox::before {
    background-position: -194px -10px;
}

.rx-upload-item.rarBox::before {
    background-position: -10px -110px;
}

.rx-upload-item.zipBox::before {
    background-position: -194px -110px;
}

.rx-upload-item.imageBox::before {
    background-position: -102px -60px;
}

.rx-upload-item.mediaBox::before {
    background-position: -148px -110px;
}

.rx-upload-item.otherBox::before {
    background-position: -102px -110px;
}

</style>
